<template>
  <div class="menu">
    <!-- 顶部搜索&&选项卡 -->
    <div class="menu-nav">
      <!-- 搜索模块 -->
      <div class="menu-search">
        <van-search v-model="productName" shape="round" placeholder="输入商品名称"  @input="onInput"/>
      </div>
      <!-- 选项卡 -->
      <div class="menu-option" v-if=is > 
        <div
          class="m-item"
          v-for="(item,index) in menuOptions"
          :key="index"
          @click="toggleMenu(index)"
        >
          <!-- 图标 -->
          <div class="m-icon">
            <img class="auto-img" :src="menuIndex == index ? item.activeImg : item.inactiveImg " />
          </div>
          <!-- 文本 -->
          <div class="m-text" :class="{ active : menuIndex == index}">{{item.title}}</div>
        </div>
      </div>
    </div>
    <!-- 查询不到的提示 -->
    <div class="notFind" v-if=isQuery>
    <van-empty image="search" description="抱歉，没有找到你想搜索的商品，换个词试试~" >
      <van-loading size="24px" vertical>加载中...</van-loading>
    </van-empty>
    </div>
    <!--商品列表  -->
    <div class="productList">
      <div class="productItem" v-for="(item,index) in productData" :key="index" @click="onClick(item)">
        <div class="productImage">
          <img :src="item.smallImg" alt />
          <div class="product-hot" v-if="item.isHot == 1" >hot</div>
        </div>
        <div class="name">
          <div class="productName">{{item.name}}</div>
          <div class="productEnName">{{item.enname}}</div>
        </div>
        <div class="price">￥{{item.price}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Menu",
  data() {
    return {
      menuIndex: 0,
      menuOptions: [
        {
          title: "推荐",
          inactiveImg: require("../assets/images/icons_09.gif"),
          activeImg: require("../assets/images/icons_21.gif")
        },
        {
          title: "拿铁",
          inactiveImg: require("../assets/images/icons_05.gif"),
          activeImg: require("../assets/images/icons_19.gif")
        },
        {
          title: "咖啡",
          inactiveImg: require("../assets/images/icons_03.gif"),
          activeImg: require("../assets/images/icons_18.gif")
        },
        {
          title: "瑞纳冰",
          inactiveImg: require("../assets/images/icons_07.gif"),
          activeImg: require("../assets/images/icons_20.gif")
        }
      ],
      productType:["1"],
      productData: [],
      key: ["isHot"],
      value: ["1"],
      productName:'',
      //是否展示选项卡
      is:true,
      //是否找到
      isQuery:false
    };
  },
  created() {
    this.getProductType();
    this.getProductData();
  },
  methods: {
    //选项卡切换功能
    toggleMenu(index) {
      if(index == this.menuIndex)return;
      if(index==0){
        this.value="1";
        this.key="isHot";
      }
      else{
        this.value = this.productType[index];
        this.key="type"
      }
      this.getProductData();
      this.menuIndex = index;
    },
    //获取商品类型方法
      getProductType() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true
      });
      this.axios({
        //请求类型
        method: "get",
        //请求地址
        url: "/type",
        params: {
          appkey: this.appkey,
        }
      }).then(res => {
        // console.log(res);
        for(var i=0;i<res.data.result.length;i++){
          this.productType.push(res.data.result[i].type);
        }
      });
    },
    //获取商品数据方法
    getProductData() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true
      });
      this.axios({
        //请求类型
        method: "get",
        //请求地址
        url: "/typeProducts",
        params: {
          appkey: this.appkey,
          key: this.key,
          value: this.value
        }
      }).then(res => {
        // console.log(res);
        this.productData = res.data.result;
      });
    },
    // 搜索
    onInput(val){
      this.axios({
        //请求类型
        method: "get",
        //请求地址
        url: "/search",
        params: {
          appkey: this.appkey,
          name:this.productName
        }
      }).then(res => {
        this.isQuery = false;
        this.is = false;
        this.productData = res.data.result;
        if(val=="")this.is=true;
        if(res.data.result.length==0)
          
          this.isQuery = true;
      });
    },
    //商品的点击事件
    onClick(item) {
          // console.log("跳转到"+item.name+"商品详情页面");
          // console.log(item.pid);
          this.$router.push({ path: "/ProductDetail",query:{id:item.pid} });
    }
  }
};
</script>

<style lang="less" scoped>
.menu .menu-option {
  display: flex;
  padding-top: 10px;
}
.menu .menu-option .m-item {
  flex: 1;
  height: 60px;
  text-align: center;
}
.menu .menu-option .m-item .m-icon {
  width: 34px;
  height: 34px;
  margin: 0 auto;
}
.menu .menu-option .m-item .m-text {
  color: #646566;
  font-weight: bold;
  size: 14px;
}
.menu .menu-option .m-item .m-text.active {
  color: #0c34ba;
}
.productList {
  padding: 0 10px;
  margin: 0 0 60px 0;
}
.productItem {
  width: 360px;
  height: 90px;
  background-color: white;
  display: flex;
  direction: row;
  align-items: center;
}
.productImage{
  position: relative;
}
.productImage img {
  padding: 10px;
  height: 70px;
  width: 70px;
  overflow: hidden;
}
.name {
  padding-left: 10px;
  width: 200px;
  font-size: 18px;
}
.price{
  color: #0c34ba;
  font-size: 15px;
  font-weight: bolder;
}
.product-hot {
  width: 25px;
  height: 25px;
  background-color: #0c34ba;
  border-radius: 0px 0px 5px 5px;
  position: absolute;
  top: 0px;
  left: 10px;
  color: white;
  text-align: center;
  line-height: 25px;
  top: 10px;
  left: 15px;
}
.notFind{
  height: 667px;
}
</style>